<template>
	<div v-if="themeConfig.breadcrumb" class="bread-crumb">
		<el-breadcrumb separator=">">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<template v-for="item in props.breadCrumbList" :key="item.id">
				<!-- <el-breadcrumb-item :to="item.path ? item.path : ''">{{ item.name }}</el-breadcrumb-item> -->
				<el-breadcrumb-item :to="{ path: item.path }">{{ item.name }}</el-breadcrumb-item>
			</template>
		</el-breadcrumb>
	</div>
</template>

<script lang="ts" setup>
import { computed } from "vue"
import { breadCrumbTypes } from "../breadCrumb/type/type"
import useGlobalStore from "@/store/globe"

const globalStore = useGlobalStore()
const themeConfig = computed(() => {
	return globalStore.themeConfig
})
const props = defineProps({
	breadCrumbList: {
		type: Array<breadCrumbTypes>,
		default: []
	}
})
</script>

<style lang="less" scoped>
.active_hover {
	&:hover {
		color: var(--el-color-primary);
	}
}
</style>
